<!doctype html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>达拉崩吧</title>
    <style>
        body {
            background-color: #171a21;
        }

        #cas {
            display: block;
            border: 3px dashed #8b8f90;
            margin: auto;
        }
    </style>
    <script>
        var strall = '龘䶛䨻䆉㸞蚮䡶䴞䴝䯬䬛䰕㹚·㱎䖘䵈䶁䘔䶑䘓铽䩳䵷㒪䪉䉥·䥸䝟䳮䟑䎘䫱䉷䰯䕈䟐䬝';
        var player = document.createElement('audio');
        var playfun; var idx = 0;
        var txt = strall.split('');
        window.onload = function () {
            canvas = document.getElementById("cas");
            context = canvas.getContext('2d');
            var w = document.body.offsetWidth - 10;
            var h = window.innerHeight - 50;
            canvas.width = w;
            canvas.height = h;
            focallength = 250;
            var pause = false;
            var dots = getimgData(txt[idx]);
            initAnimate();
            function initAnimate() {
                idx++;
                if (idx > txt.length - 1) {
                    idx = 0;
                }
                dots.forEach(function () {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.z = Math.random() * focallength * 2 - focallength;
                    this.tx = Math.random() * canvas.width;
                    this.ty = Math.random() * canvas.height;
                    this.tz = Math.random() * focallength * 2 - focallength;
                    this.paint();
                });
                animate();
            }
            //计算帧速率
            var lastTime; var derection = true;
            function animate() {
                var thisTime = +new Date();
                context.clearRect(0, 0, canvas.width, canvas.height);
                dots.forEach(function () {
                    var dot = this;
                    if (derection) {
                        if (Math.abs(dot.dx - dot.x) < 0.1 && Math.abs(dot.dy - dot.y) < 0.1
                            && Math.abs(dot.dz - dot.z) < 0.1) {
                            dot.x = dot.dx;
                            dot.y = dot.dy;
                            dot.z = dot.dz;
                            if (thisTime - lastTime > 300) derection = false;
                        } else {
                            dot.x = dot.x + (dot.dx - dot.x) * 0.1;
                            dot.y = dot.y + (dot.dy - dot.y) * 0.1;
                            dot.z = dot.z + (dot.dz - dot.z) * 0.1;
                            lastTime = +new Date()
                        }
                    } else {
                        if (Math.abs(dot.tx - dot.x) < 0.1 && Math.abs(dot.ty - dot.y) < 0.1
                            && Math.abs(dot.tz - dot.z) < 0.1) {
                            dot.x = dot.tx;
                            dot.y = dot.ty;
                            dot.z = dot.tz;
                            pause = true;
                        } else {
                            dot.x = dot.x + (dot.tx - dot.x) * 0.1;
                            dot.y = dot.y + (dot.ty - dot.y) * 0.1;
                            dot.z = dot.z + (dot.tz - dot.z) * 0.1;
                            pause = false;
                        }
                    }
                    dot.paint();
                });
                if (pause) {
                    dots = getimgData(txt[idx]);
                    initAnimate()
                    derection = true;
                } else {
                    if ("requestAnimationFrame" in window) {
                        requestAnimationFrame(animate);
                    } else if ("webkitRequestAnimationFrame" in window) {
                        webkitRequestAnimationFrame(animate);
                    } else if ("msRequestAnimationFrame" in window) {
                        msRequestAnimationFrame(animate);
                    } else if ("mozRequestAnimationFrame" in window) {
                        mozRequestAnimationFrame(animate);
                    }
                }
            }
            player.src = 'hudun/dalabengba.mp3';
            player.loop = true;
            playfun = setInterval("startSound()", 500);
        }
        function startSound() {
            player.play(); //没有就播放
            clearInterval(playfun)
        }
        Array.prototype.forEach = function (callback) {
            for (var i = 0; i < this.length; i++) {
                callback.call(this[i]);
            }
        }
        function getimgData(text) {
            drawText(text);
            var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
            context.clearRect(0, 0, canvas.width, canvas.height);
            var dots = [];
            for (var x = 0; x < imgData.width; x += 6) {
                for (var y = 0; y < imgData.height; y += 6) {
                    var i = (y * imgData.width + x) * 4;
                    if (imgData.data[i] >= 128) {
                        var dot = new Dot(x - 3, y - 3, 0, 3);
                        dots.push(dot);
                    }
                }
            }
            return dots;
        }
        function drawText(text) {
            context.save()
            context.font = "100px 微软雅黑 bold";
            context.fillStyle = "rgba(198,0,25,1)";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(text, canvas.width / 2, canvas.height / 2);
            context.restore();
        }
        var Dot = function (centerX, centerY, centerZ, radius) {
            this.dx = centerX;
            this.dy = centerY;
            this.dz = centerZ;
            this.tx = 0;
            this.ty = 0;
            this.tz = 0;
            this.z = centerZ;
            this.x = centerX;
            this.y = centerY;
            this.radius = radius;
        }
        Dot.prototype = {
            paint: function () {
                context.save();
                context.beginPath();
                var scale = focallength / (focallength + this.z);
                context.arc(canvas.width / 2 + (this.x - canvas.width / 2) * scale,
                    canvas.height / 2 + (this.y - canvas.height / 2) * scale,
                    this.radius * scale, 0, 2 * Math.PI);
                context.fillStyle = "rgba(198,0,25," + scale + ")";
                context.fill();
                context.restore();
            }
        }
    </script>
</head>

<body>
    <canvas id='cas'>浏览器不支持canvas</canvas>
</body>

</html>